
<template>
	<view class="content">
		<view class="text_body">
			<text class="text1">Hi</text>
			<text class="text4">小鱼模板欢迎您！</text>
		</view>
		<view class="from">
			<view class="_b">
				<text
					:style="{'border-bottom':adminType == 'login' ? '6rpx solid rgba(18, 141, 247, 1)' : '6rpx solid transparent','color':adminType == 'login' ? '6rpx solid rgba(18, 141, 247, 1)' : '6rpx solid transparent'}"
					@click="adminType = 'login'">账号密码登录</text>
				<text
					:style="{'border-bottom':adminType == 'code' ? '6rpx solid rgba(18, 141, 247, 1)' : '6rpx solid transparent'}"
					@click="adminType = 'code'">验证码登录</text>
			</view>
			<view class="_input">
				<input type="text" :placeholder="adminType == 'login' ? '请输入您的账号/手机号' : '请输入您的手机号'"
					placeholder-class="_pl" v-model="username" @input="onKeyVinInput"/>
			</view>
			<view class="_input">
				<input type="password" :placeholder="adminType == 'login' ? '请输入您的登录密码' : '请输入验证码'"
					placeholder-class="_pl" v-model="password"/>
				<button class="sms" v-if="adminType == 'code'" @click="start" :disabled="showText">{{second ? second : '获取验证码'}}</button>
			</view>
			<checkbox-group @change="user" v-if="adminType == 'login'">
				<label class="_user">
					<checkbox v-model="username" :checked="isShow" color="#128df7" style="transform:scale(0.6)" />
					<text>记住账号</text>
				</label>
			</checkbox-group>
			<button class="login" @tap="submit">登录</button>
			<view v-if="adminType == 'login'" class="_f">
				<text>还没有账号?<text class="passworld">去注册</text></text>
				<text class="passworld">忘记密码</text>
			</view>
		</view>
		<view class="_check">
			<checkbox-group @change="checkbox">
				<label>
					<checkbox value="t" :checked="isShow" color="#128df7" style="transform:scale(0.7)" />
					<text>我已阅读并同意<text style="color:#128df7;">《用户协议》</text>和<text
							style="color:#128df7;">《隐私政策》</text></text>
				</label>
			</checkbox-group>
		</view>
	</view>
</template>

<script>
import {loginRes} from '@/config/api.js';
	export default {
		data() {
			return {
				//用户登录类型
				adminType: 'login',
				//是否同意用户隐私政策协议
				isShow: false,
				//验证码倒计时
				second: 0,
				showText:false,
				username: '',
				password: '',
				deviceId: '',
				//设备相关信息
				systemInfo: {},
				
			}
			
		},
		// async onLoad(){
		// 	console.log(uni.getStorageSync('phone'))
		// 	if(uni.getStorageSync('phone')!=''){
		// 		this.username=uni.getStorageSync('phone')
		// 	}
		// },
		methods: {
			async submit() {
				if(this.adminType=="login"){
					uni.getSystemInfo({
						success: (res) => {
							 // console.log(res)
							this.systemInfo = res
						}
					})
					const params={
						username:this.username,
						password:this.password,
						requestId:this.requestId,
						deviceId:this.systemInfo.deviceId,//设备id
						deviceModel:this.systemInfo.deviceModel,//设备型号
						deviceBrand:this.systemInfo.deviceModel,//设备品牌
						system:this.systemInfo.system,
						deviceType:this.systemInfo.deviceType,
					}
					// console.log(params)
					const res= await loginRes(params)
					 console.log(res)
					var encrypt = this.aes_decrypt(res.data)
					 console.log(encrypt)
					 this.$u.vuex('vuex_token',encrypt)
					setTimeout(() => {
							const backUrl=uni.getStorageSync('back_url') || 'pages/index/index'
							// console.log(backUrl)
							this.$u.route({
								type:'reLaunch',
							    url: backUrl,	
							})
					}, 500)	
					
					
				}else{
					console.log(222)
					console.log(this.adminType)
					const params={
						username:this.username,
						code:this.password,
					}
					uni.showToast({
						 title: '非常抱歉，暂时未提供该功能',
						 type: 'success',
						 icon: 'error',
						 position: 'center',
						 duration: 1500
					});
				}
				
			},
			//限制输入框只能输入数字或者字母
			onKeyVinInput(e){
			      const o = e.target;
				  console.log(o.value)
			     var strTemp = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/;
			     if(strTemp.test(o.value)){
			     console.log("正确")
			     }else{
			     uni.showToast({icon:'none',title:'请输入正确的电话',duration:15000});
			     return false
			     }
			 },
			/** 
			@method 用户隐私框
			**/
			checkbox(e) {
				console.log(e);
			},
			/**
			@method 保存密码到本地,读取则放在onShow函数使用uni.getStorageSync()读取本地账号密码
			**/
			user(e) {
				
				console.log(e.detail.value);
				e.detail.value.length > 0 ? uni.setStorageSync('phone', this.username) : uni.removeStorageSync('phone', this.username)
			},
			/**
			@method 验证码开始倒计时 setTimeout设置到时时间1000 == 1秒
			**/
			start() {
				this.second = 10;
				this.showText = true;
				uni.showToast({
					 title: '非常抱歉，暂时未提供该功能',
					 type: 'success',
					 icon: 'error',
					 position: 'center',
					 duration: 2500
				});
				// var interval = setInterval(() => {
				// 	--this.second
				// }, 1000)
				// setTimeout(() => {
				// 	clearInterval(interval)
				// 	this.showText = false;
				// }, 10000);
			}
		}
	}
</script>
<style lang="scss" scoped>
	button::after{
		border: none;
	}
	//是否刘海屏
	.content {
		width: 100%;

		.text_body {
			width: 100%;
			padding: 40rpx;
			padding-top: 120rpx;
			padding-bottom: 130rpx;
			background-color: rgba(18, 141, 247, 1);

			text {
				font-size: 35rpx;
				font-weight: bold;
				display: block;
				color: #fff;
			}

			.text1 {}

			.text4 {
				margin-top: 10rpx;
			}
		}

		.from {
			width: 80%;
			margin: 0px auto;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			padding-top: 20rpx;
			margin-top: -80rpx;
			background-color: #fff;
		}

		._b {
			width: 70%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0px auto;
			margin-top: 30rpx;
			margin-bottom: 50rpx;

			text {
				font-size: 30rpx;
				padding-bottom: 15rpx;
			}
		}

		._input {
			width: 100%;
			height: 80rpx;
			margin: 0px auto;
			border-radius: 10rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			margin-top: 30rpx;
			border: 1px solid #dadbde;

			input {
				width: 75%;
				height: 80rpx;
				padding-left: 40rpx;
				// border:1px solid red;
			}

			._pl {
				font-size: 28rpx;
			}

			.sms {
				font-size: 28rpx;
				white-space: nowrap;
				color: rgba(18, 141, 247, 1);
				margin-right: 25rpx;
				background-color: transparent;
				border: none;
			}
		}

		.login {
			width: 100%;
			height: 85rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			margin: 0px auto;
			outline: none;
			background-color: rgba(18, 141, 247, 1);
			color: #fff;
			font-size: 30rpx;
			margin-top: 30rpx;
		}

		.passworld {
			display: block;
			margin: 0px auto;
			text-align: center;
			margin-top: 40rpx;
			color: rgba(18, 141, 247, 1);
			text-decoration: underline;
		}

		._check {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 180rpx;

			text {
				font-size: 28rpx;
			}
		}

		._f {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;

			text {
				display: flex;
				align-items: center;
				display: inline;
				margin: 0;
				font-size: 28rpx;
			}
		}

		._user {
			font-size: 26rpx;
			display: flex;
			align-items: center;
		}
	}
</style>